@import './_variables.styl'

body,
html
  margin: 0
  padding: 0
  font-family: sans-serif
  color: $body-color
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

body
  font-size: 16px

h2,
h3,
h4
  color: $vue-dark

h2
  margin: 2em 0 1.5em 0

h3
  margin: 0 0 1em 0

h4
  margin-bottom: 0.5em

section
  width: 80%
  max-width: 1000px
  margin: 0 auto 2em auto

a
  color: $vue-green
  text-decoration: none

header
  background: $vue-darker
  color: #fff
  text-align: center
  height: 150px
  display: flex
  flex-flow: column nowrap
  justify-content: center
  align-items: center
  position: relative

  h1
    margin: 0
    color: $vue-green-light
    .version
      font-weight: 300
      margin: 0 .2em 0 .1em

  p
    margin-bottom: 0
    color: -white(0.3)
    font-size: 300

    .version
      font-weight: 100
      background-color: alpha($vue-dark, 0.7)
      padding: .1em .5em
      border-radius: 3px

button
  display: inline-block
  outline: 0
  background: $vue-green
  border: 1px solid $vue-green
  color: #fff
  border-radius: 4px
  font-size: 0.9em
  vertical-align: baseline
  padding: 0.3em 0.5em
  transition: opacity 0.3s
  cursor: pointer
  &:hover
    opacity: 0.7

button.common
  background: #fff
  border: 1px solid $vue-green
  color: $vue-green

button.secondary
  background: #fff
  border: 1px solid $vue-darker
  color: $vue-darker

button.size-small
  font-size 0.8em;
  padding: 0.2em 0.4em;

nav.top-nav
  background: $vue-darker
  position: relative

  .title
    display: none

  span.version,
  span.downloads
    a
      border: 0
      text-decoration: none

  span.version
    position: absolute
    z-index: 301
    right: 1em
    bottom: .5em

  span.downloads
    position: absolute
    z-index: 301
    left: .8em
    bottom: .5em

  &.stick
    position: fixed
    top: 0
    left: 0
    right: 0
    z-index: 300

    .title
      display: inline-block
      color: -white(0.7)
      position: absolute
      z-index: 301
      left: 1em
      top: .8em

    span.downloads
      display: none

  ul
    list-style: none
    padding: 0
    margin: 0
    display: flex
    flex-flow: row nowrap
    justify-content: center
    align-items: stretch

    li
      margin: 0 1em
      overflow: hidden
      a
        color: -white(0.5)
        display: block
        padding: .8em .5em
        border-radius: 5px

        -webkit-transition: color .3s
        transition: color .3s

        position: relative
        overflow: hidden
        z-index: 1

        &:hover
          color: alpha($vue-green, 0.7)
          cursor: pointer

        &.active
          color: $vue-green-light

          &:after
            content: ''
            display: block
            width: 0
            height: 0
            border: 10px solid transparent
            border-bottom-color: #fff
            position: absolute
            bottom: -3px
            left: calc(50% - 10px)
            z-index: 3

main.content
  &.nav-affixed
    padding-top: 44px

.fade
  transition: opacity .5s ease

.fade-enter-active, .fade-leave-active
  opacity: 0

.description
  p
    line-height: 1.5em
  code
    color: $vue-dark
    background: -black(0.03)
    border-radius: 3px
    padding: 0.2em 0.5em
    margin: 0 0.2em
    vertical-align: baseline

.preview
  padding: 2em 1.5em
  border: 1px solid -black(0.07)
  border-radius: 3px
  b
    font-size: 0.9em
    color: $dark-grey
  p
    margin: 0
    padding: .5em 0 1.5em 0
    &:last-of-type
      padding-bottom: 0

.codes
  pre
    position: relative
    font-size: 0.8em
    code
      padding: 2em
      border-radius: 3px

    &:after
      content: attr(data-title)
      position: absolute
      top: 0.3em
      right: 0.8em
      font-size: 0.8em
      color: alpha($vue-dark, 0.6)

.capitailized
  text-transform: uppercase
